<template>
    <div>

        <el-card class="box-card" style="width: 98%;margin-left: 1%">
            <span>
                  <span style="font-size: 26px;font-weight: bold"> 编辑 [ {{ obj.name }} ] 文档 </span>
                  <el-button style="float: right;margin-right: 5.5%;background-color: #FF5E2C;color: white" @click="$refs.form.submit()">保存数据</el-button>
                  <el-button style="float: right;margin-right: 12px" @click="emptytChange">关闭</el-button>
            </span>

            <el-card class="box-card" style="margin-top: 20px">
                <avue-form ref="form" v-if="initSuccess" v-model="obj" :option="option"
                           @reset-change="emptytChange"
                           @submit="submit">
                    <template slot-scope="{row}" slot="content">
                        <MdEditor v-if="initSuccess" :content.sync="obj.content"/>
                    </template>
                </avue-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>

import {baseUploadUrl} from "@/config/env";
import VueMarkdownEditor, {xss} from '@kangc/v-md-editor';
import {getStore} from "@/util/store";

export default {
    data() {
        return {
            obj: {},
            isIdFind: true,
            initSuccess: false,
            c: [],
            uri: {
                info: "/api/admin/all/docInfo",
                listCategory: "/api/admin/all/docCategory/list",
            },
        }
    },
    props: {
        closeDialog: [],
        rowData: {},
    },
    computed: {
        option() {
            return {
                submitBtn: true,
                emptyBtn: true,
                submitText: '提交',
                emptyText: "关闭",
                column: [
                    {
                        label: '类型',
                        prop: 'type',
                        span: 23,
                        disabled: true,
                        type: "radio",
                        // dicData: this.dict.get("DOC_TYPE"),
                        dicData: this.categoryTypes,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        rules: [{
                            required: true,
                            message: "请选择 分类类型",
                            trigger: "blur"
                        }]
                    },

                    {
                        label: '名称',
                        prop: 'name',
                        maxlength: 64,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请输入 分类名",
                            trigger: "blur"
                        }]
                    },

                    // {
                    //     label: '描述',
                    //     prop: 'describe',
                    //     type: 'textarea',
                    //     maxlength: 256,
                    //     showWordLimit: true,
                    //     span: 23,
                    //     rules: [{
                    //         required: true,
                    //         message: "请输入 分类描述",
                    //         trigger: "blur"
                    //     }]
                    // },
                    {
                        label: '文章内容 ',
                        prop: 'content',
                        maxlength: 0,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: false,
                            message: "请输入 文章内容 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '展示类型',
                        prop: 'showType',
                        type: 'radio',
                        dicData: this.dict.get('DOC_SHOW_TYPE', true),
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请选择 是否禁用",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '作者',
                        prop: 'author',
                        // width: 200,
                        maxlength: 32,
                        showWordLimit: true,
                        span: 23,
                        search: false,
                        searchSpan: 5,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入 作者",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '排序',
                        prop: 'sort',
                        maxlength: 9,
                        showWordLimit: true,
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请输入 排序",
                            trigger: "blur"
                        }]
                    },

                    {
                        label: '是否禁用',
                        prop: 'disable',
                        type: 'switch',
                        dicData: this.dict.get('DISABLE', false),
                        span: 23,
                        rules: [{
                            required: true,
                            message: "请选择 是否禁用",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Title',
                        prop: 'seoTitle',
                        maxlength: 128,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Title",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Description',
                        prop: 'seoDescription',
                        type: 'textarea',
                        maxlength: 256,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Description",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: 'seo: Keyword',
                        prop: 'seoKeyword',
                        type: 'textarea',
                        maxlength: 256,
                        showWordLimit: true,
                        span: 23,
                        labelWidth: 130,
                        rules: [{
                            required: false,
                            message: "请输入 seo优化字段 Keyword",
                            trigger: "blur"
                        }]
                    },
                ]
            }
        }
    },
    created() {
        // 查询分类
        this.crud.get(this.uri.listCategory).then(res => {
            this.categoryTypes = res.data.data;
        })

        console.log("编辑文档")
        this.findId(this.$route.query.id);
    },
    methods: {
        emptytChange() {
            // this.closeDialog(false);
            this.$router.push({
                path: "/viewsdoc/docInfo/docInfo",
                query: {
                    tenantName: getStore({name: "tenantName"}),
                    id: this.obj.id,
                    activeName: this.obj.type,
                }
            });
        },

        submit(form, done) {
            if (this.obj.content != null && this.obj.content != "") {
                this.obj.contentHtml = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(this.obj.content));
            }
            this.crud.put(this.uri.info + "/" + this.obj.id, this.obj).then((res) => {
                console.debug(res);
                if (res.data.code == 200) {
                    // this.closeDialog(true);
                    this.$router.push({
                        path: "/viewsdoc/docInfo/docInfo",
                        // path: "/viewsdoc/docInfo/docInfo?time=" + new Date().getTime(),
                        query: {
                            tenantName: getStore({name: "tenantName"}),
                            id: this.obj.id,
                            activeName: this.obj.type,
                        }
                    });
                }
                done(form);
            }).catch(err => {
                console.error(err);
                done(form);
            })
        },
        findId(id) {
            this.crud.get(this.uri.info + "/" + id).then((res) => {
                this.obj = res.data.data;
                this.initSuccess = true;
            })
        }
    }
}
</script>
